<template>
  <div class="contain">
    <img src="@/assets/images/xiankuang.png" class="bgcClass" />
    <TopPart />
    <div class="boxClass">
      <div>
        <div>
          <div class="topTitleClass">
            <div class="detailClass">
              <div>{{ wf }}</div>
              <div>五分计法</div>
            </div>
            <div class="detailClass2">
              <div>{{ nowEye == "left" ? "左眼" : "右眼" }}</div>
              <div>当前测试</div>
            </div>
            <div class="detailClass">
              <div>{{ xs }}</div>
              <div>小数计法</div>
            </div>
          </div>

          <div class="testNameClass" v-if="!loading">
            <img
              src="@/assets/images/testE.svg"
              alt=""
              class="block-logo"
              :class="'xiang-' + rotate"
              :style="{
                width: jf[nowjf].width + 'px',
                height: jf[nowjf].width + 'px',
              }"
            />
          </div>
          <div v-else>
            <a-spin size="large" />
          </div>
        </div>
        <!-- <div
          class="imgClass"
          @keydown="handleKeyDown"
          tabindex="0"
          style="outline: none"
        >
          <img src="@/assets/images/ykq_a.svg" />
        </div> -->
        <div
          class="imgClass"
          @keydown="handleKeyDown"
          tabindex="0"
          style="outline: none"
        >
          <img src="@/assets/images/shang1.svg" />
          <div>
            <img src="@/assets/images/zuo1.svg" />
            <img
              class="midClass"
              src="@/assets/images/kbq.svg"
            />
            <img src="@/assets/images/you1.svg" />
          </div>
          <img src="@/assets/images/xia1.svg" />
        </div>
      </div>
      <audio ref="falsePlayer" src="@/assets/vocie/error.mp3"></audio>
      <audio ref="truePlayer" src="@/assets/vocie/correct.mp3"></audio>
    </div>
  </div>
</template>

<script>
import TopPart from "@/components/TopPart";
import { mapGetters } from "vuex";
import { debounce } from "ant-design-vue/lib/vc-table/src/utils";
import math from "@/filter/calculationAccuracy.js";

export default {
  components: {
    TopPart,
  },
  data() {
    return {
      wf: "", //五分计法
      xs: "", //小数计法
      mi: "",

      nowjf: 8, // E字符的倍数
      nowjfVal: 4.8, // 默认视力
      nowEye: sessionStorage.getItem("nowEye"), //当前测试的类型

      // //计分
      jf: [
        { wf: 4.0, xs: 0.1, width: 72.71 },
        { wf: 4.1, xs: 0.12, width: 57.75 },
        { wf: 4.2, xs: 0.15, width: 45.88 },
        { wf: 4.3, xs: 0.2, width: 36.44 },
        { wf: 4.4, xs: 0.25, width: 28.95 },
        { wf: 4.5, xs: 0.3, width: 22.99 },
        { wf: 4.6, xs: 0.4, width: 18.27 },
        { wf: 4.7, xs: 0.5, width: 14.51 },
        { wf: 4.8, xs: 0.6, width: 11.53 },
        { wf: 4.9, xs: 0.8, width: 9.15 },
        { wf: 5.0, xs: 1.0, width: 7.27 },
        { wf: 5.1, xs: 1.2, width: 5.78 },
        { wf: 5.2, xs: 1.5, width: 4.59 },
        { wf: 5.3, xs: 2.0, width: 3.64 },
      ],

      flag: 0, //1向左滑动,2向右滑动,3向上滑动 4向下滑动
      text: "", //向哪里滑动
      lastX: 0,
      lastY: 0,
      next: [],
      qian: [],
      rotate: 0,

      nextEye: "左眼", //下个测试的类型
      showModel: false,
      childrenId: "",
      visionDataId: "", //格式123_J
      screensSize: 21, //屏幕尺寸，21寸
      yn: "", //'裸眼','佩戴眼镜'
      jl: [], //测试记录，1回答正确 0回答错误

      innerAudioContext: null,
      glasses: "",
      ry: "",
      ly: "",
      jiaoLy: "", //矫正视力左眼
      jiaoRy: "", //矫正视力右眼
      loading: false,
      timer: null, //定时器
    };
  },
  computed: {
    ...mapGetters({
      testingData: "getTestingData",
      childList: "getChildList",
    }),
  },
  created() {
    this.init();
  },
  mounted() {
    console.log("this.$el", this.$el.getElementsByClassName("imgClass")[0]);
    this.$el.getElementsByClassName("imgClass")[0].focus();

    this.timer = setInterval(() => {
      this.$el.getElementsByClassName("imgClass")[0].focus(); //获取焦点，不然遥控器容易失去控制
    }, 1000);

    document.addEventListener("keydown", this.preventKeyScroll);
  },
  destroyed() {
    document.removeEventListener("keydown", this.preventKeyScroll);
    clearInterval(this.timer);
  },
  methods: {
    preventKeyScroll(event) {
      // 检查按下的键是否是方向键
      if (
        ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)
      ) {
        event.preventDefault();
      }
    }, //防止屏幕移动
    // 初始化方法
    init() {
      let sizeValue = localStorage.getItem("sizeValue");
      let resolution = localStorage.getItem("resolution");
      var screenWidth = window.screen.width * window.devicePixelRatio;
      let trueScreen = resolution ? resolution : screenWidth;
      let num = math.divide(sizeValue, trueScreen);
      for (var i = 0; i < this.jf.length; i++) {
        this.jf[i].width = math.divide(this.jf[i].width, num);
      }
      console.log(this.jf, "this.jf");
      let nowIndex = sessionStorage.getItem("currentIndex");
      let nowStudentData = this.childList[nowIndex];
      let data = "";
      if (nowStudentData.status) {
        //戴眼镜
        if (this.nowEye == "left") {
          data = nowStudentData.wearLeftVision
            ? nowStudentData.wearLeftVision
            : "4.8"; //上次左眼测试结果
        } else {
          data = nowStudentData.wearRightVision
            ? nowStudentData.wearRightVision
            : "4.8"; //上次右眼测试结果
        }
      } else {
        //裸眼
        if (this.nowEye == "left") {
          data = nowStudentData.leftVision ? nowStudentData.leftVision : "4.8"; //上次左眼测试结果
        } else {
          data = nowStudentData.rightVision
            ? nowStudentData.rightVision
            : "4.8"; //上次右眼测试结果
        }
      }
      let index = this.jf.findIndex((i) => i.wf == data); //从上次测试开始测
      if (index != -1) {
        this.nowjf = index;
        this.nowjfVal = this.jf[this.nowjf].wf;
      }
      this.wf = this.jf[this.nowjf].wf;
      this.xs = this.jf[this.nowjf].xs;
    },
    // 计算E的方向
    rotateValue() {
      let value = Math.round(Math.random() * 3) * 90;
      if (this.rotate === value) {
        this.rotateValue();
      } else {
        this.rotate = value;
      }
    },
    // 按下按键
    handleKeyDown: debounce(function (event) {
      console.log("event", event);
      switch (event.key) {
        case "ArrowUp":
          // 270
          this.judgeRotate(270);
          break;
        case "ArrowDown":
          // 90
          this.judgeRotate(90);
          break;
        case "ArrowLeft":
          // 180
          this.judgeRotate(180);
          break;
        case "ArrowRight":
          // 0
          this.judgeRotate(0);
          break;
        case "Enter":
          // 看不清
          this.judgeRotate(600);
          break;
        default:
          break;
      }
    }, 350),

    judgeRotate(value) {
      if (this.rotate == value) {
        const truePlayer = this.$refs.truePlayer;
        if (truePlayer) {
          truePlayer.currentTime = 0;
          truePlayer.play();
        }

        this.next.push(1);
        this.jl.push(1);

        if (this.next.length == 3) {
          console.log("答对3题top", this.nowjf);
          this.qian = [];
          this.next = [];
          console.log("this.jf[this.nowjf].wf", this.jf[this.nowjf].wf);
          if (
            this.jf[this.nowjf].wf == 5.3 ||
            this.jf[this.nowjf].wf < this.nowjfVal
          ) {
            if (this.nowEye == "left") {
              this.testingData.leftEye = this.jf[this.nowjf].wf;
              this.testingData.leftXS = this.jf[this.nowjf].xs;
              console.log("前往右眼");
              return this.nextEyeTest(2);
            } else {
              this.testingData.rightEye = this.jf[this.nowjf].wf;
              this.testingData.rightXS = this.jf[this.nowjf].xs;
              this.$store.commit("setTestingData", this.testingData);
              console.log("右眼提交");
              return this.submitResults();
            }
          } else {
            this.nowjf++;
            this.wf = this.jf[this.nowjf].wf;
            this.xs = this.jf[this.nowjf].xs;
          }
        }
      } else {
        //答错
        //语音提示
        const falsePlayer = this.$refs.falsePlayer;
        if (falsePlayer) {
          falsePlayer.currentTime = 0;
          falsePlayer.play();
        }

        this.jl.push(0);
        this.qian.push(1);

        if (this.qian.length >= 2) {
          console.log("答错2题zuo", this.nowjf);
          this.qian = [];
          this.next = [];
          if (
            this.jf[this.nowjf].wf == 4.0 ||
            this.jf[this.nowjf].wf > this.nowjfVal
          ) {
            if (this.nowEye == "left") {
              // if(this.testingData.leftEye == null)
              this.$set(this.testingData, "leftEye", this.jf[this.nowjf].wf);
              this.$set(this.testingData, "leftXS", this.jf[this.nowjf].xs);
              return this.nextEyeTest(2);
            } else {
              this.$set(this.testingData, "rightEye", this.jf[this.nowjf].wf);
              this.$set(this.testingData, "rightXS", this.jf[this.nowjf].xs);

              // this.testingData.rightEye = this.jf[this.nowjf].wf.toString()
              this.$store.commit("setTestingData", this.testingData);
              return this.submitResults();
            }
          } else {
            this.nowjf--;
            this.wf = this.jf[this.nowjf].wf;
            this.xs = this.jf[this.nowjf].xs;
          }
        }
      }
      console.log("?");
      this.rotateValue();
    },
    // 前往下一个眼睛测试
    nextEyeTest(num) {
      this.$store.commit("setTestingData", this.testingData);
      sessionStorage.setItem("nowEye", num == 1 ? "left" : "right");
      this.stopMidea();
      setTimeout(() => {
        this.$router.push({
          path: "/ChooseEye",
        });
      }, 300);
    },
    stopMidea() {
      const truePlayer = this.$refs.truePlayer;
      setTimeout(() => {
        if (truePlayer) {
          truePlayer.pause();
        }
      }, 200);
      const falsePlayer = this.$refs.falsePlayer;
      setTimeout(() => {
        if (falsePlayer) {
          falsePlayer.pause();
        }
      }, 200);
    },
    // 提交
    submitResults() {
      this.stopMidea();
      setTimeout(() => {
        this.$router.push({
          path: "/TestResult",
        });
      }, 300);
    },
  },
};
</script>

<style lang="less" scoped>
.contain {
  padding: 1% 2%;
  height: 100%; /* 至少为视口高度 */
  display: flex;
  flex-direction: column;
  .bgcClass {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
  }
  .boxClass {
    flex: 1;
    background-color: #fff;
    border-radius: 0.06rem;
    padding: 0.15rem 0 0.34rem;
    font-size: 0.19rem;
    font-weight: bold;
    position: relative;

    & > div:first-child {
      width: 95%;
      height: 100%;
      margin: 0 auto;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .topTitleClass {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        font-size: 0.15rem;
        color: #484e51;

        .detailClass {
          div:first-child {
            font-size: 0.25rem;
            color: #484e51;
          }
        }

        .detailClass2 {
          div:first-child {
            font-size: 0.25rem;
            color: #18191a;
          }
        }
      }

      .testNameClass {
        font-size: 0.5rem;
        margin-top: 0.28rem;
      }
      .imgClass {
        text-align: center;
        cursor: pointer;
        position: absolute;
        z-index: 9999;
        bottom: 3%;
        left: 0;
        right: 0;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 0.42rem;
          height: 0.42rem;
        }
        .midClass {
          width: 0.52rem;
          height: 0.52rem;
        }
      }
    }
  }
}

// E相关样式
.testNameClass {
  .xiang-0 {
    left: 50%;
    top: 50%;
    transform: translateX(0%) translateY(0%) rotate(0deg);
  }

  .xiang-90 {
    left: 50%;
    top: 50%;
    transform: translateX(0%) translateY(0%) rotate(90deg);
  }

  .xiang-180 {
    left: 50%;
    top: 50%;
    transform: translateX(0%) translateY(0%) rotate(180deg);
  }

  .xiang-270 {
    left: 50%;
    top: 50%;
    transform: translateX(0%) translateY(0%) rotate(270deg);
  }
}
</style>